<template>
  <el-container>
    <!--    左侧-->
    <el-aside width="200px">
      <img src="../assets/loginBox.svg">
      <p class="asideTitle">欢迎使用管理系统</p>
    </el-aside>

    <!--    右侧-->
    <el-main>
      <p class="mainTitle">欢迎登录</p>
      <div class="mainContent">
        <el-form
            ref="loginFormRef"
            style="max-width: 600px"
            :model="loginForm"
            :rules="loginRules"
            label-width="auto"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
        >
          <el-form-item label="账号" prop="loginAct">
            <el-input v-model="loginForm.loginAct" />
          </el-form-item>
          <el-form-item label="密码" prop="loginPwd">
            <el-input v-model="loginForm.loginPwd" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login">登 录</el-button>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="loginForm.rememberMe" label="记住我" size="large" />
          </el-form-item>
        </el-form>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import {doGet, doPost} from "../http/HttpRequest.js";
import {getTokenName, messageTip, removeToken} from "../util/util.js";

export default {
  name: "LoginView",
  data() {
    return{
      loginForm: {},
      loginRules: {
        loginAct:[
          { required: true, message: '请输入用户登录名', trigger: 'blur' },
          { min: 1, max: 11, message: '长度应该为1-11位', trigger: 'blur' },
        ],
        loginPwd: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
          { min: 1, max: 11, message: '长度应该为1-11位', trigger: 'blur' },
        ]
      }
    }
  },
  mounted() {
    // 进行免登录
    this.freeLogin();
  },
  methods: {
    login() {
      // 验证表单是否合法
      this.$refs.loginFormRef.validate(valid => {
        let formData = new FormData();
        formData.append("loginAct", this.loginForm.loginAct);
        formData.append("loginPwd", this.loginForm.loginPwd);
        formData.append("rememberMe", this.loginForm.rememberMe);
        if (valid) {
          doPost("/api/login", formData).then((resp) => {
            if(resp.data.code === 200) {
              //   let a = resp.data.data;
              messageTip("登录成功", "success");

              // 清除历史存储的token，避免token重复
              removeToken();

              // 前端存储jwt：如果勾选了记住我，则存放在localStorage中，否则存放在sessionStorage中
              if(this.loginForm.rememberMe === true) {
                window.localStorage.setItem(getTokenName(), resp.data.data);
              }else {
                window.sessionStorage.setItem(getTokenName(), resp.data.data);
              }
              // 路由进行跳转
              window.location.href="/dashboard";
            } else {
              messageTip("登录失败", "error");
            }
          })
        }
      })
    },
    freeLogin() {
      // 首先取出判断是否勾选了记住我，直接从LocalStorage中取值
      let token = window.localStorage.getItem(getTokenName());
      if (token) {
        doGet("/api/login/free").then(resp => {
          if (resp.data.code === 200) {
            // 免登录，则直接跳转路由到dashboard页面
            window.location.href = "/dashboard";
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.el-aside {
  background-color: black;
  color: white;
  width: 40%;
  text-align: center;
}
.asideTitle {
  color: white;
  font-size: 28px;
}
.el-main {
  height: calc(100vh);
}
.mainTitle {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
}
.mainContent{
  text-align: center;
  margin: auto;
  width: 60%;
}
img {
  height: 380px;
}
.el-button {
  width: 100%;
}

</style>